<template>
  <div class="box">
   <div class="top">
     <div class="typeface">
       <span class="soop" style="display: inline-block; margin-top: 20px;">学用 “ 千万工程 ” 经验，推进乡村全面振兴工作调度系统</span>

       <span class="time">{{ formattedDate }} |</span>
       <span class="time1">{{ formattedDate1 }}</span>
       <span class="time2">{{ formattedDate2 }}</span>

     </div>
     <div>
     </div>
   </div>
   <div class="content">
     <div class="icon"></div>
     <div class="icon1"></div>
     <div class="content_left">

       <div class="left_top">
         <div class="data"></div>
         <div class="data1">
           <span class="spans">数据总览</span>
         </div>
         <div class="task">
           <div class="kuai">
             <img src="../image/icon.png" alt="" style="margin-left: 0px;">
             <p>任务总数</p>
             <p class="figure">{{ task }}</p>
           </div>
           <div class="kuai1">
             <img src="../image/icon1.png" alt="" style="margin-left:0px;">
             <p>单位总数</p>
             <p class="figure_one">{{ department }}</p>
           </div>
           <div class="kuai2">
             <img src="../image/icon2.png" alt="" style="margin-left: 0px;">
             <p>用户总数</p>
             <p class="figure_two">{{ user }}</p>
           </div>
         </div>
       </div>
       <div class="left_center">
         <div class="data1">
           <span class="spans">任务月度统计</span>
         </div>
         <div style="width: 99%; height: 90%; border: 1px solid #ffff;">
           <HistogramTu></HistogramTu>
         </div>
        
       </div>
       <div class="left_bottom">
         <div class="data1">
           <span class="spans">最新任务清单</span>
         </div>
         <div style="width: 99%; height: 90%; border: 1px solid #ffff;">
           <el-table :data="tableData" stripe style="width: 95%; height: 99%;margin-left: 10px;margin-top: 10px">
             <el-table-column prop="date" label="序号" width="55" type="index" />
             <el-table-column prop="createdTitle" label="单位-责任科室" width="120" />
             <el-table-column prop="responsibleDepartment" label="工作任务" width="100" />
             <el-table-column prop="nodeTime" label="时间节点" width="100" />
           </el-table>
         </div>

       </div>

     </div>
     <div class="content_center">
       <div class="center_top">
         <div class="center_top_left">
           <div class="zhu" style="margin-top: 40px;">
             <p class="ps">临汾市</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -15px;">
             <p class="ps">尧都区</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -20px">
             <p class="ps">侯马市</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -25px">
             <p class="ps">霍州市</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -30px">
             <p class="ps">洪洞县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -30px">
             <p class="ps">襄汾县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -25px">
             <p class="ps">曲沃县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -20px">
             <p class="ps">翼城县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px; margin-left: -15px">
             <p class="ps">浮山县</p>
           </div>
         </div>
         <div class="center_top_center">
           <MapCharts></MapCharts>
         </div>
         <div class="center_top_right">
           <div class="zhu1" style="margin-top: 40px;  margin-left: 25px;">
             <p class="ps">古县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 30px;">
             <p class="ps">安泽县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 35px;">
             <p class="ps">汾西县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 40px;">
             <p class="ps">蒲县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 45px;">
             <p class="ps">宁乡县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 40px;">
             <p class="ps">吉县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 35px;">
             <p class="ps">大宁县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 30px;">
             <p class="ps">隰县</p>
           </div>
           <div class="zhu1" style="margin-top: 35px;  margin-left: 25px;">
             <p class="ps">永和县</p>
           </div>
         </div>
       </div>
       <div class="center_bottom">
         <div class="di"></div>
         <RelationChart></RelationChart>
       </div>

     </div>
     <div class="content_right">
       <div class="right_top">
         <div class="data"></div>
         <div class="data1">
           <span class="spans">临汾市农业农村基本情况</span>
         </div>
         <div class="areas">
           <p style="width: 90%; height: 105%;background-color: #ffff;">
             农村基本情况临汾市农业农村基本情况临汾市农业农村基本情况临汾市农业农
           村基本情况临汾市农业农村基本情况临汾市
           业农村基本情况临汾市农业农村基本情况临汾市农业农
           村基本情况临汾市农业农村基本情况临汾市
           业农村基本情况临汾市农业农村基本情况临汾市农业农
           村基本情况临汾市农业农村基本情况临汾市农业农村基本情况临汾市农业农村基本情况
           业农村基本情况临汾市农业农村基本情况临汾市农业农
           村基本情况临汾市农业农村基本情况临汾市
           </p>
         

         </div>
       </div>
       <div class="right_bottom">
         <div class="data3"></div>
         <div class="data1">
           <span class="spans">单位任务数及上报率</span>
         </div>
         <div style="width: 99%; height: 90%; border: 1px solid #ffff;">
           <MultipleCharts></MultipleCharts>
         </div>
        
       </div>
     </div>
   </div>
   <div class="bottom"></div>

 </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import * as echarts from "echarts";
import HistogramTu from "../echarts/HistogramTu.vue"
import MultipleCharts from "../echarts/MultipleCharts.vue"
import MapCharts from "../echarts/MapCharts.vue"
import RelationChart from "../echarts/RelationChart.vue"
// import { apiLogin } from "../api/menu.js"
import { Add,table } from '../units/api';
const task=ref('')
const department=ref('')
const user=ref('')
const tableData = ref([])
function List() {
 Add({
 }).then((res) => {
   console.log(res)
   task.value= res.data.data.taskCount
   department.value= res.data.data.departmentCount
   user.value= res.data.data.userCount
 })
}
List()

//表格数据
function tableList(){
 table({
   pageIndex:1,
   pageSize:6
 }).then((res)=>{
   console.log('00000',res)
   tableData.value=res.data.data
 })
}
tableList()
const formattedDate = ref('');
const formattedDate1 = ref('');
const formattedDate2 = ref('');
const itme = () => {
 const timestamp = Date.now();
 const date = new Date(timestamp);
 const year = date.getFullYear();
 const month = String(date.getMonth() + 1).padStart(2, '0');
 const day = String(date.getDate()).padStart(2, '0');
 const week = '星期' + '日一二三四五六'.charAt(date.getDay());
 const hours = String(date.getHours()).padStart(2, '0');
 const minutes = String(date.getMinutes()).padStart(2, '0');
 const seconds = String(date.getSeconds()).padStart(2, '0');
 formattedDate.value = `${hours}:${minutes}:${seconds}`;
 formattedDate1.value = `${week}`;
 formattedDate2.value = `${year}.${month}.${day} `;
 // console.log(formattedDate);
}

const tiu = setInterval(itme, 1000);
onMounted(tiu);
</script>

<style scoped>
.box {
 width: 100%;
 background-image: url("../image/overall.png");
 background-repeat: no-repeat;

}

.top {
 left: 0px;
 top: 0px;
 width: 100%;
 height: 112px;
 opacity: 1;
 background-image: url("../image/top.png");
 background-repeat: no-repeat;
 background-position: 48% 50%;
}

.soop {
 font-size: 32px;
 font-weight: 900;
 letter-spacing: 0px;
 line-height: 43.9px;
 color: black;
 text-align: left;
 vertical-align: top;
}

.content {
 width: 100%;
 height: 951px;
 /* background-color: skyblue; */
}

.bottom {
 width: 100%;
 height: 52px;
 background-image: url("../image/bottom.png");
 background-repeat: no-repeat;
 background-position: 58% 50%;
}

.content_left {
 float: left;
 width: 24.4%;
 height: 951px;
 background-image: url("../image/rectangle1.png");
 background-repeat: no-repeat;
 background-size: 100% 100%;
   background-position:0px 0px;
 /* background-color: blue; */
}

.content_center {
 float: left;
 width: 46%;
 height: 951px;
 margin-left: 1%;
 /* background-color: yellowgreen; */
}

.content_right {
 float: right;
 width: 24.5%;
 height: 951px;
 background-image: url("../image/rectangle.png");
 background-repeat: no-repeat;
 background-size: 110% 100%;
 /* background-position: -37px 7px; */
}

.left_top {
  width: 88%;
  height: 27%;
  margin-right: 5%;
  margin-left: 2%;
  /* background-color: rgb(225, 145, 80); */
}

.left_center {
 width: 90%;
 height: 30%;
}

.left_bottom {
 width: 90%;
 height: 40%;
 /* background-color: rgb(173, 104, 227); */
}

.center_top {
 width: 100%;
 height: 60%;
 /* background-color: rgb(79, 215, 208); */

}

.center_bottom {
 width: 100%;
 height: 40%;
 /* background-color: rgb(193, 67, 218); */

}

.right_top {
 width: 95%;
 height: 30%;
 margin-left: 5%;
 /* background-color: rgb(209, 245, 45); */
}

.right_bottom {
 width: 90%;
 height: 70%;
 margin-left: 10%;
 /* background-color: rgb(12, 61, 165); */
}

.center_top_left {
 position: relative;
 float: left;
 width: 12.5%;
 height: 100%;
 /* background-color: brown; */
}

.center_top_right {
 float: right;
 width: 12.5%;
 height: 100%;
 /* background-color: brown; */
}

.center_top_center {
 float: left;
 width: 75%;
 height: 100%;
 /* background-color: aliceblue; */
}

.icon {
 float: left;
 width: 1.6%;
 height: 100%;
 background-image: url("../image/left.png");
 background-repeat: no-repeat;
}

.icon1 {
 float: right;
 width: 1.5%;
 height: 100%;
 background-image: url("../image/right.png");
 background-repeat: no-repeat;
}

.data {
 width: 100%;
 height: 10%;
 /* background-color: aquamarine; */
}
.data3 {
 width: 100%;
 height: 1%;
 /* background-color: aquamarine; */
}

.data1 {
 width: 100%;
 height: 33px;
 text-align: left;
 background-image: url("../image/data.png");
 background-repeat: no-repeat;
}


.task {
  width: 100%;
  height: 78%;
  border: 1px solid #ffff;
  display: flex;
  /* background-color: #EDF6F4; */
}

.kuai {
  flex: 1;
  margin: .9375rem;
  height: 10.3125rem;
  background-color: #ffff;
}

.kuai1 {
  flex: 1;
  margin: .9375rem;
  height: 10.3125rem;
  background-color: #ffff;
}

.kuai2 {
  flex: 1;
  margin: .9375rem;
  height: 10.3125rem;
  background-color: #ffff;
}

.spans {
 margin-left: 40px;
 display: inline-block;
 margin-top: 3px;
 font-size: 20px;
 font-weight: 500;
 letter-spacing: 0px;
 line-height: 27.44px;
 color: rgba(6, 46, 25, 1);
}

.figure {
 /** 文本1 */
 font-size: 24px;
 font-weight: 700;
 display: inline-block;
 margin-top: 3px;
 letter-spacing: 0px;
 line-height: 24px;
 color: rgba(255, 141, 26, 1);
 text-align: left;
 vertical-align: top;
}
.figure_one {
 /** 文本1 */
 font-size: 24px;
 font-weight: 700;
 display: inline-block;
 margin-top: 3px;
 letter-spacing: 0px;
 line-height: 24px;
 color: rgba(0, 176, 164, 1);
 text-align: left;
 vertical-align: top;
}
.figure_two {
 /** 文本1 */
 font-size: 24px;
 font-weight: 700;
 display: inline-block;
 margin-top: 3px;
 letter-spacing: 0px;
 line-height: 24px;
 color: rgba(60, 214, 68, 1);
 text-align: left;
 vertical-align: top;
}
.areas{
 width:94%;
 height: 180px;
 padding: 10px;
 margin-left: 6%;
 margin-top: 5px;
 text-align: left;
 background-color: #ffff;
 text-indent: 2em;
 display: -webkit-box;  
 -webkit-box-orient: vertical;  
 overflow: hidden;  
 text-overflow: ellipsis;  
 -webkit-line-clamp: 7; /* 限制显示的行数为3行 */  
 line-height: 1.5; /* 设置行高，根据需要调整 */  
}
.zhu{
 width: 80px;
 height: 25px;
 background-image: url("../image/advocate.png");
 background-repeat: no-repeat;
 background-size: 100%;
}
.zhu1{
 width: 80px;
 height: 24px;
 background-image: url("../image/next.png");
 background-repeat: no-repeat;
 background-size: 100%;
}
.ps{
 font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 26px;
color: rgba(247, 255, 251, 1);
text-align: center;
vertical-align: middle;
}
.di{
 width: 114.5%;
 height: 47px;
 margin-left: -55px;
 background-image: url("../image/di.png");
 background-repeat: no-repeat;
}
.time {
 position: absolute;
 top: 1.5rem;
 right: 12.875rem;
 font-size: 1.75rem;
 font-weight: 400;
 letter-spacing: 0px;
 line-height: 28px;
 color: rgba(51, 166, 97, 1);
 text-align: left;
 vertical-align: middle;
}

.time1 {
 position: absolute;
 top: 1rem;
 right: 9rem;
 font-size: 1rem;
 font-weight: 400;
 letter-spacing: 0px;
 line-height: 1.75rem;
 color: rgba(51, 166, 97, 1);
 text-align: left;
 vertical-align: middle;
}

.time2 {
 position: absolute;
 top: 2.375rem;
 right: 7rem;
 font-size: 1rem;
 font-weight: 400;
 letter-spacing: 0px;
 line-height: 1.75rem;
 color: rgba(51, 166, 97, 1);
 text-align: left;
 vertical-align: middle;
}
</style>
